<template>
    <div class="right-map">
        <div id="map"></div>
        <div id="drawLib">
            <span class="lib-item" :class="active=='point'?'active':''" @click="addOverlay('point')">添加点</span>
            <span class="lib-item" :class="active=='line'?'active':''" @click="addOverlay('line')">添加线</span>
            <span class="lib-item" :class="active=='polygon'?'active':''" @click="addOverlay('polygon')">添加面</span>
        </div>
    </div>
</template>
<script>
    import {mapState} from 'vuex';
    import {createUnitId, getObjLength} from 'utils/utils';
    import {addPoint, addLine, addPolygon, transPoints} from 'utils/map';
    export default {
        data(){
            return {
                drawingManager: null,
                active: ''
            }
        },
        computed: mapState({
            mapObj: state => state.mapObj,
            zoom: state => state.zoom,
            overlaysPoints: state => state.overlaysPoints,
            referencePoints: state => state.referencePoints,
            overlays: state => state.overlays,
            reference: state => state.reference,
            shapeStyle: state => state.shapeStyle
        }),
        mounted(){
            //初始化地图
            this.initMap();
            //初始化上一次保存的形状
            this.initOldShape();
            //初始化绘制工具
            this.initDraw();
            //初始化类型
            this.initType();
        },
        methods: {
            //创建地图并居中位置
            initMap(){
                let map = new BMap.Map('map');
                let centerPoint = new BMap.Point(this.zoom.x, this.zoom.y);
                map.centerAndZoom(centerPoint ,this.zoom.in);
                map.enableScrollWheelZoom();
                this.$store.dispatch('initMapObj', map);
            },
            //生成本地存储的形状
            initOldShape(){
                for(let i in this.overlaysPoints){
                    let item = this.overlaysPoints[i],
                        shape = this.initOldShapeEvent(item);
                    this.mapObj.addOverlay(shape);
                    //添加到本地数据
                    this.saveOverlaysData(shape, item);
                }
                for(let i in this.referencePoints){
                    let item = this.referencePoints[i],
                        shape = this.initOldShapeEvent(item);
                    this.mapObj.addOverlay(shape);
                    //添加到本地数据
                    this.saveReferenceData(shape, item);
                }
            },
            //生成形状映射
            initOldShapeEvent(item){
                if(!item.id || !item.type) return null;
                let result = null;
                switch(item.type){
                    case 'point': result = addPoint(this.mapObj, item);break;
                    case 'line': result = addLine(this.mapObj, item);break;
                    case 'polygon': result = addPolygon(this.mapObj, item);break;
                }
                return result;
            },
            //初始化绘制工具
            initDraw(){
                let self = this;
                this.drawingManager = new BMapLib.DrawingManager(this.mapObj, {
                    isOpen: false, //是否开启绘制模式
                    polylineOptions: this.shapeStyle.lineStyle, //线的样式
                    polygonOptions: this.shapeStyle.polygonStyle //多边形的样式
                });
                this.drawingManager.addEventListener('overlaycomplete', (e) => {
                    self.drawingManager.close();
                    //保存绘制的形状
                    self.saveOverlaysData(e.overlay);
                    self.active = '';
                    self.$emit('changeoverlaydata', self.transOverlayData());
                });
            },
            //初始化切换类型
            initType(){
                this.mapObj.addControl(new BMap.MapTypeControl());
            },
            //绘制形状
            addOverlay(type){
                let typeMap = {
                    'point': BMAP_DRAWING_MARKER,
                    'line': BMAP_DRAWING_POLYLINE,
                    'polygon': BMAP_DRAWING_POLYGON
                }
                //先关闭前一个
                this.drawingManager.close();
                this.drawingManager.open();
                this.active = type;
                this.drawingManager.setDrawingMode(typeMap[type]);
            },
            //保存形状数据
            saveOverlaysData(shape, item={}){
                let id = item.id || createUnitId(),
                    name = item.name || '标记' + getObjLength(this.overlays),
                    style = item.style || {},
                    data = {};
                data[id] = {
                    id: id,
                    name: name,
                    type: item.type || this.active || '',
                    style: style,
                    overlay: shape
                }
                this.$store.dispatch('setOverlaysData', data);
            },
            //保存参照物形状数据
            saveReferenceData(shape, item={}){
                let id = item.id || createUnitId(),
                    name = item.name || '参照物' + getObjLength(this.reference),
                    style = item.style || {},
                    data = {};
                data[id] = {
                    id: id,
                    name: name,
                    type: item.type || this.active || '',
                    style: style,
                    overlay: shape
                }
                this.$store.dispatch('setReferenceData', data);
            },
            //转换为列表用数据
            transOverlayData(){
                let result = {}, shape = null;
                for(let i in this.overlays){
                    result[i] = {};
                    result[i].id = this.overlays[i].id;
                    result[i].name = this.overlays[i].name;
                    result[i].type = this.overlays[i].type;
                    result[i].point = transPoints(result[i].type, this.overlays[i].overlay);
                }
                return result;
            }
        }
    }
</script>
<style lang="scss" scope>
    .right-map {
        position: relative;
        height: 100%;
        #map {
            height: 100%;
        }
        #drawLib {
            position: absolute;
            top: 5px;
            left: 5px;
            background-color: #fff;
            border: 1px solid #00a2ca;
            overflow: hidden;
            .lib-item {
                box-sizing: border-box;
                display: inline-block;
                float: left;
                padding: 0 16px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                text-align: center;
                color: #00a2ca; 
                cursor: pointer;
                &:hover {
                    color: #fff;
                    background-color: #00a2ca;
                }
                &.active {
                    color: #fff;
                    background-color: #00a2ca;
                }
                & + .lib-item {
                    border-left: 1px solid #00a2ca;
                }
            }
        }
    }
</style>


